<template>
  <div>
      <header>music</header>
      <div class="content">
        <div class="content_a" @click="changeborder">
            <router-link class="content_nav" :class="{active:k==1}" id="1" to="/home"  >首页</router-link>
            <router-link class="content_nav" :class="{active:k==2}" id="2" to="/recommend" >推荐</router-link>
            <router-link class="content_nav" :class="{active:k==3}" id="3" to="/hotsong" >热歌榜</router-link>
        </div>
      <transition :name="transitionName">
        <router-view></router-view>
       </transition>
      </div>
      
  </div>  
</template>

<script>
 /* eslint-disable */

export default {
  name: 'index',
//   router:router,
  data:function(){
    return{
      transitionName: 'left',
      isActive:false,
      k:1
    }
  },
  watch: {
  '$route' (to, from) {
      const toDepth = to.path.split('/').length;
      const fromDepth = from.path.split('/').length;
      this.transitionName = toDepth < fromDepth ? 'right' : 'left';
    }
  },
  methods:{
    changeborder(e){
      this.k=e.target.id;
    }
  }
}
</script>

<style scoped lang="scss">

.v-leave{
  opacity:1;
}
.v-leave-to{
  opacity:0;
}
.v-leave-active{
  transition:2s;
}
  .left-enter{
    transform:translateX(100%);
  }
.left-enter-active{
  transition:1s;
}
.left-leave-to{
  transform:translateX(-100%);
}
.left-leave-active{
  transition:1s;
}
 
.right-enter{
  transform:translateX(-100%);
}
.right-enter-active{
  transition:1s;
}
.right-leave-to{
  transform:translateX(100%);
}
.right-leave-active{
  transition:1s;
}

.active{
  border-bottom:2px solid purple;
}
  header{
    width:100vw;
    height:15vw;
    background-color: purple;
    color:#fff;
    font-size:18px;
    line-height: 15vw;
    text-align: center;
  }
  .content{
      width:100vw;
      position: absolute;
      top:15vw;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      
      .content_a{
        width:100vw;
        height:10vw;
        margin-bottom:5vw;
        .content_nav{
            text-decoration: none;
            width:33.33vw;
            float:left;
            line-height: 10vw;
            text-align:center;
            color:#666;
            background:#fcfcfd;
            &:hover{
              border-bottom:2px solid purple;
            }
        }

      }
  }
</style>
